<template>
  <div
    class="k-header text-center w-full flex align-center justify-center relative"
  >
    <img src="@/assets/board/headbg.png" />
    <div
      style="font-size: 3.7vh; height: 4vh; line-height: 4vh"
      class="font-bold text-title text-nowrap"
    >
      {{ title }}
    </div>
    <img src="@/assets/board/headbg.png" style="transform: scaleX(-1)" />

    <div class="time flex font-16">
      <div class="font-bold times">{{ time }}</div>
      <div class="line" />
      <div>
        {{ date }} <br />
        {{ week }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { ref, getCurrentInstance, computed } from "vue";

const $config = getCurrentInstance().appContext.config.globalProperties.$config;
// console.log($config);
const title = computed(() => $config.BoardTitle);

const date = ref(dayjs().format("YYYY-MM-DD"));
const time = ref(dayjs().format("HH:mm:ss"));
const weekArr = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六"
];
const week = ref(weekArr[new Date().getDay()]);

const getTime = () => {
  date.value = dayjs().format("YYYY-MM-DD");
  week.value = weekArr[new Date().getDay()];
  time.value = dayjs().format("HH:mm:ss");
};

setInterval(() => {
  getTime();
}, 1000);
</script>

<style lang="scss" scoped>
.k-header {
  height: 7.41vh;
  img {
    height: 100%;
  }
  .time {
    position: absolute;
    right: 2vw;
    top: 50%;
    transform: translateY(-50%);
    color: #66ffff;
    .times {
      font-size: 3.33vh;
      letter-spacing: 0.52vw;
      line-height: 4vh;
    }
    .line {
      width: 1px;
      height: 3.7vh;
      background: #66ffff;
      margin: 0 1.25vw;
    }
  }
}
</style>
